<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三国杀身份标注（静态演示）</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="app" class="miniapp">
      <!-- 顶部小程序风格导航栏 -->
      <div class="mini-topbar">
        <button id="mini-back" class="mini-icon">‹</button>
        <div class="mini-title">三国杀身份标注</div>
        <button id="mini-action" class="mini-icon">···</button>
      </div>

      <div class="mini-sub">静态演示 — 示例数据模拟交互</div>

      <div class="mini-actions">
        <button id="createRoomBtn" class="mini-btn">创建房间</button>
        <button id="joinRoomBtn" class="mini-btn">加入房间</button>
        <button id="backHomeNav" class="mini-btn">返回首页</button>
        <button id="addHeroBtn" class="mini-btn">添加武将</button>
        <button id="rulesBtn" class="mini-btn">使用说明</button>
        <button id="historyBtn" class="mini-btn">历史记录</button>
      </div>

      <!-- 武将搜索 -->
      <div class="hero-search">
        <input id="heroSearchInput" placeholder="搜索武将名，比如：赵云" />
        <button id="heroSearchBtn">搜索</button>
      </div>
      <div id="searchResults" class="card hidden"></div>

      <main class="mini-main">
        <section id="recentRooms" class="card">
          <h2>最近参与的房间</h2>
          <ul id="recentRoomsList"></ul>
        </section>

        <section id="mainView" class="card"></section>
      </main>

      <!-- 底部 tabBar（模拟） -->
      <div class="mini-tabbar">
        <button class="tab-item active">首页</button>
        <button class="tab-item">房间</button>
        <button class="tab-item">我的</button>
      </div>
      <!-- 添加武将模态框（放在 app 内以确保脚本能正确引用与显示） -->
      <div id="addHeroModal" class="modal hidden">
        <div class="modal-content">
          <h3>添加武将</h3>
          <form id="addHeroForm" enctype="multipart/form-data">
            <label>姓名: <input name="name" required /></label>
            <label>势力: <input name="faction" /></label>
            <label>图片: <input type="file" name="image" accept="image/*" required /></label>
            <div class="modal-actions">
              <button type="submit">提交</button>
              <button type="button" id="cancelAddHero">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="js/app.js"></script>
  </body>
</html>